/**
 * @description  资产分配（资产配置）
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin, Divider, Progress } from 'antd';
import { FirstHeaderC, NoDataC } from '../../../comps';
import _ from 'lodash';
import styles from './index.less';

class distribution extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    const { args } = this.props;
    this.getData(args);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args } = nextProps;

    if (JSON.stringify(args) !== JSON.stringify(this.props.args)) {
      this.getData(args);
    }
  }

  //获取数据
  getData = (args) => {
    const datas = {
      portfolioCodeList: JSON.stringify([...args.portfolioCodeList]),
      beginDate: args.beginDate,
      endDate: args.endDate,
      needPenetrate: args.needPenetrate,
      zqfz: args.zqfz,
    };
    this.props.dispatch({
      type: 'assetAllocationM/queryDistributionData',
      payload: {
        ...datas,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            data: data,
          });
        } else {
          this.setState({
            data: [],
          });
        }
      },
    });
  };

  record = (row) => {
    const value = (row.proportion * 100).toFixed(2);
    return (
      <div
        className={styles.card}
        //  style={{
        //     borderRadius: '4px',
        //     border: '1px solid rgba(67, 118, 255, 0.2)',
        //     // margin: '0 20px',
        //     height: '40px',
        //     lineHeight: '38px',
        // }}
      >
        <Row>
          <Col span={6} offset={2}>
            <div
              title={row.portfolioName}
              style={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {row.portfolioName}
            </div>
          </Col>
          <Col span={3}>{row.portfolioCode}</Col>
          <Col span={6} offset={2}>
            <div className={value >= 0 ? styles.proportionbg1 : styles.proportionbg2}>
              <div
                className={styles.proportion}
                style={{
                  width: Math.abs(value) > 100 ? '100%' : `${Math.abs(value)}%`,
                  height: '6px',
                  borderRadius: '3px',
                }}
              />
            </div>
          </Col>
          <Col span={5}>
            <div style={{ marginLeft: '10px', textAlign: 'left' }}>{`${value}%`}</div>
          </Col>
        </Row>
      </div>
    );
  };

  render() {
    const { data } = this.state;
    return (
      <div style={{ marginTop: '20px' }}>
        <Spin spinning={this.props.loading == true}>
          <FirstHeaderC title='产品分配' />

          {data.length > 0 ? (
            <Row gutter={[20, 8]}>
              {data.map((x, index) => (
                <Col
                  key={`distribution-${index}`}
                  span={12}
                  style={{
                    // width: '50%',
                    textAlign: 'center',
                  }}
                >
                  {this.record(x)}
                </Col>
              ))}
            </Row>
          ) : (
            <NoDataC />
          )}
        </Spin>
      </div>
    );
  }
}
export default connect(({ assetAllocationM, loading }) => ({
  assetAllocationM,
  loading: loading.effects['assetAllocationM/queryDistributionData'],
}))(distribution);
